<template>
	<view class="details-container">
		<!-- 课程头部 -->
		<view class="hd">
			<view class="back" @click="back">
				<image src="../../static/imgs/left.png" mode=""></image>
			</view>
			<view class="title">课程详细</view>
			<view class="share">
				<image src="../../static/imgs/details-share.png" mode=""></image>
			</view>
		</view>
		<!-- 内容 -->
		<view class="content">
			<view class="con-left">
				<image src="../../static/imgs/details.png" mode=""></image>
			</view>
			<view class="con-right">
				<view class="title">{{courseForm.title}}</view>
				<view class="info">{{courseForm.intro}}</view>
				<view class="time">
					<text style="font-size: 28rpx;color: #999FAD;">授课：{{courseForm.author}}</text>
					<image src="../../static/imgs/add.png" mode=""></image>
				</view>
				<view class="price">
					<text style="font-size: 28rpx;">￥</text>
					<text>{{courseForm.price}}.00</text>
				</view>
			</view>
		</view>
		<view class="time">
			上架时间：12月31日
		</view>
		<view class="details">
			互联网产品设计主要指通过用户研究和分析进行的整套服务体系和价值体系的设计过程，设计也分不同的方向，互联网产品在设计过程中分成多个阶段，每个阶段是不同的设计活动；本课程介绍了设计的几个方面，我们一起来看一下。
		</view>
		<!-- 课程列表 -->
		<view class="course-list">
			<view class="title">课程列表</view>
			<view class="course-content">
				<view class="list-item">
					<image src="../../static/imgs/course-list.png" mode=""></image>
					<text>基础知识入门</text>
				</view>
				<view class="list-item">
					<image src="../../static/imgs/course-list.png" mode=""></image>
					<text>基础知识入门</text>
				</view>
				<view class="list-item">
					<image src="../../static/imgs/course-list.png" mode=""></image>
					<text>基础知识入门</text>
				</view>
				<view class="btn">查看全部</view>
			</view>
		</view>
		<view class="footer-btn">
			<view class="btns">
				<view class="msg">
					<image src="../../static/imgs/details-message.png" mode=""></image>
				</view>
				<view class="msg">
					<image src="../../static/imgs/details-collect.png" mode=""></image>
				</view>
				<view class="bm">
					立即报名
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {details} from "@/api/course.js"
	export default {
		data() {
			return {
				courseId:"",
				courseForm:{}
			};
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			getCourseDetail(){
				details(this.courseId).then(res=>{
					this.courseForm=res.data
					console.log(res)
				})
			}
		},
		onLoad(option) {
			this.courseId=option.id
			this.getCourseDetail()
			console.log(option.id)
		}
	}
</script>

<style lang="scss" scoped>
	.details-container {
		padding: 100rpx 60rpx;

		.hd {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.back {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				border: 1px solid #FFFFFF;
				box-shadow: 6rpx 10rpx 20rpx 2rpx rgba(151, 173, 225, 0.6);
				background: #F4F6F8;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 21rpx;
					height: 34rpx;
				}
			}

			.title {
				color: #3D5464;
				font-weight: 800;
				font-size: 40rpx;
			}

			.share {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				border: 1px solid #FFFFFF;
				box-shadow: 6rpx 10rpx 20rpx 2rpx rgba(151, 173, 225, 0.6);
				background: #F4F6F8;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 27rpx;
					height: 30rpx;
				}
			}
		}

		.content {
			display: flex;
			align-items: center;
			margin: 80rpx 0 20rpx 0;

			.con-left {
				image {
					width: 320rpx;
					height: 380rpx;
				}
			}

			.con-right {
				height: 280rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.title {
					color: #3D5464;
					font-weight: 800;
					font-size: 36rpx;
				}

				.info {
					color: #71818C;
					font-weight: 800;
					font-size: 36rpx;
				}

				.time {
					display: flex;
					align-items: center;

					image {
						margin-left: 20rpx;
						width: 32rpx;
						height: 32rpx;
					}
				}

				.price {
					font-weight: 800;
					color: #FFB300;
					font-size: 36rpx;
				}
			}
		}

		.time {

			color: #455372;
			font-weight: 400;
			font-size: 28rpx;
		}

		.details {
			margin: 20rpx 0;
			color: #999FAD;
			font-weight: 400;
			font-size: 24rpx;
		}

		.course-list {
			.title {
				margin: 80rpx 0 34rpx 0;
				color: #3D5464;
				font-weight: 800;
				font-size: 40rpx;
			}

			.course-content {
				padding: 50rpx 34rpx;
				border: 2rpx solid #FFFFFF;
				border-radius: 30rpx;
				box-shadow: 10rpx 10rpx 20rpx 2rpx rgba(151, 173, 225, 0.6);
				background: #F4F6F8;

				.list-item {
					margin-bottom: 40rpx;
					display: flex;
					align-items: center;

					image {
						width: 43rpx;
						height: 36rpx;
					}

					text {
						font-size: 28rpx;
						color: #3D5464;
						margin-left: 40rpx;
						font-weight: 800;
					}
				}

				.btn {
					background-color: #3F7BED;
					color: #F4F6F8;
					text-align: center;
					line-height: 60rpx;
					border-radius: 40rpx;
					box-shadow: 10rpx 10rpx 20rpx 2rpx rgba(151, 173, 225, 0.8);
					height: 60rpx;
				}
			}
		}

		.footer-btn {
			position: fixed;
			bottom: 0px;
			left: 60rpx;
			right: 60rpx;
			border-top: 2rpx solid #89B1F8;
			padding: 70rpx 0;

			.btns {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.msg {
					width: 60rpx;
					height: 60rpx;
					background: #FFFFFF;
					border-radius: 50%;
					line-height: 60rpx;
					text-align: center;
					box-shadow: 6rpx 6rpx 20rpx 2rpx rgba(151, 173, 225, 0.6);

					image {
						width: 36rpx;
						height: 36rpx;
						margin-top: 15rpx;
					}
				}

				.bm {
					width: 400rpx;
					border: 1rpx solid #FFFFFF;
					border-radius: 20rpx;
					box-shadow: 10rpx 10rpx 20rpx 2rpx rgba(151, 173, 225, 0.8);
					background: #3F7BED;
					height: 60rpx;
					text-align: center;
					color: #F4F6F8;
					line-height: 60rpx;
					font-size: 20rpx;
				}
			}

		}
	}
</style>
